<template>
  <div :style="imgStyle"></div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: "",
    },
    defaultSrc: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      _src: "",
    };
  },
  computed: {
    imgStyle() {
      let { width, height, src, defaultSrc } = this;
      return `width: ${width}; height: ${height}; background: url(${
        src || defaultSrc
      }) no-repeat center center; background-size: cover cover;`;
    },
  },
  methods: {
    load(src) {
      let img = document.createElement("img");
      img.src = src;
      img.onload = () => {
        this._src = src;
      };
    },
  },
};
</script>

<style>
</style>